<template>
    <ContentBase>
        <div id="form-container2" class="container text-center">
            <ContentBase>
                <div class="container text-center">
                    <div class="row">
                        <div class="col">
                            文件名
                        </div>
                        <div class="col">
                            专业
                        </div>
                        <div class="col">
                            学科
                        </div>
                        <div class="col">
                            文件大小
                        </div>
                        <div class="col">
                            上传时间
                        </div>
                        <div class="col">
                            文件详情
                        </div>
                        <div class="col">
                            删除文件
                        </div>
                    </div>
                </div>
            </ContentBase>
            <ContentBase>
                <div id="form-container" class="container text-center">
                </div>

            </ContentBase>
        </div>
    </ContentBase>
</template>
  
<script>
import ContentBase from '../components/ContentBase.vue';
import $ from 'jquery';
export default {
    name: 'MyfileView',
    components: {
        ContentBase,
    },
    methods: {
        showConfirmationDialog(message) {
            return new Promise((resolve) => {
                if (confirm(message)) {
                    resolve(true); // 用户点击了确认按钮
                } else {
                    resolve(false); // 用户点击了取消按钮
                }
            });
        },
    },
    mounted() {
        if (localStorage.getItem("is_login") != "true") {
            var formContainer = document.getElementById('form-container');
            var formBox = document.createElement("div"); //创建展示框
            var blank = document.createElement('div'); // 创建列，专业
            blank.className = "col";
            blank.textContent = "您尚未登录，点击右上角登录/注册账户"; //写入
            formBox.append(blank);
            if (formContainer) {
                formContainer.appendChild(formBox);
            }
        }
        else {
            var token = localStorage.getItem("token");
            $.ajax({
                url: 'http://10.142.225.1:3000/file/myfile',
                method: 'post',
                headers: {
                    'Authorization': 'Bearer ' + token
                },
                success: (resp) => {
                    if (resp != null) {
                        var formData = resp;
                        // 创建表单容器
                        var formBox = document.createElement("div"); //创建展示框
                        for (var i = 0; i < formData.length; i++) {
                            var formRow = document.createElement('div'); //创建行
                            formRow.className = "row";
                            var filename = document.createElement('div'); // 创建列，文件名
                            filename.className = "col";
                            filename.textContent = formData[i].filename; //写入
                            var major = document.createElement('div'); // 创建列，专业
                            major.className = "col";
                            major.textContent = formData[i].majorid; //写入
                            var subject = document.createElement('div'); // 创建列，学科
                            subject.className = "col";
                            subject.textContent = formData[i].subject; //写入
                            var size = document.createElement('div'); // 创建列，大小
                            size.className = "col";
                            size.textContent = formData[i].size; //写入
                            var updatedate = document.createElement('div'); // 创建列，上传时间
                            updatedate.className = "col";
                            var date = new Date(formData[i].updatedate);
                            // 指定日期格式
                            var options = {
                                year: 'numeric',
                                month: '2-digit',
                                day: '2-digit',
                                hour: '2-digit',
                                minute: '2-digit',
                                second: '2-digit',
                            };
                            // 使用 toLocaleString() 方法将日期对象格式化为特定格式的字符串
                            var formattedDate = date.toLocaleString('zh-CN', options);
                            updatedate.textContent = formattedDate; //写入
                            var infoButton = document.createElement('button'); // 创建获取信息按钮
                            infoButton.classList.add('col', 'infoButton'); // 添加列类和自定义按钮类
                            infoButton.setAttribute('type', 'infoButton');
                            infoButton.id = 'button_' + i;
                            console.log(infoButton.id);
                            infoButton.textContent = "详情"; // 设置按钮文本内容
                            infoButton.onclick = (function close(j) {//闭包函数在声明后就立刻执行
                                //不使用闭包函数则会让所有按钮都指向最后一个i值！！！
                                return function () {
                                    //alert(j);
                                    $.ajax({
                                        url: "http://10.142.225.1:3000/file/info/" + formData[j].filename,
                                        type: "get",
                                        success(response) {
                                            console.log(response);
                                            alert("文件ID:" + response.fileid + "\n文件名:" + response.filename + "\n专业:" + response.majorid + "\n科目:" + response.subject + "\n年份" + response.year + "\n作者:" + response.author + "\n详细描述:" + response.description + "\n文件类型:" + response.kind + "\n被下载次数:" + response.download);
                                        },
                                        error() {
                                            alert("失败");
                                        }
                                    })
                                }
                            })(i);
                            var deleteButton = document.createElement('button'); // 创建下载按钮
                            deleteButton.classList.add('col', 'deleteButton'); // 添加列类和自定义按钮类
                            deleteButton.setAttribute('type', 'deleteButton');
                            deleteButton.id = 'button_' + i;
                            console.log(deleteButton.id);
                            deleteButton.textContent = "删除"; // 设置按钮文本内容
                            deleteButton.onclick = ((j) => {
                                return async () => {
                                    //console.log(j);
                                    const confirmed = await this.showConfirmationDialog('您确定要删除改文件吗(不可撤销)');
                                    if (confirmed) {
                                        filename = formData[j].filename;
                                        $.ajax({
                                            url: "http://10.142.225.1:3000/file/delete",
                                            type: "post",
                                            headers: {
                                                'Authorization': 'Bearer ' + token
                                            },
                                            data: {
                                                filename
                                            },
                                            success(resp) {
                                                if (resp.message == "Success!") {
                                                    alert('删除成功!');
                                                    location.reload();
                                                }
                                                else alert(resp.message);
                                            },
                                            error() { alert('删除失败！'); }
                                        })
                                    }
                                };
                            })(i);
                            formRow.appendChild(filename);
                            formRow.appendChild(major);
                            formRow.appendChild(subject);
                            formRow.appendChild(size);
                            formRow.appendChild(updatedate);
                            formRow.appendChild(infoButton);
                            formRow.appendChild(deleteButton);
                            formBox.appendChild(formRow); // 将表单行添加到表单容器中
                        }
                        var formContainer = document.getElementById('form-container');
                        if (formContainer) {
                            formContainer.appendChild(formBox);
                        }
                    }
                },
                error: () => {
                    alert("访问失败！");
                }
            });
        }
    }
}
</script>

<style>
.infoButton {
    width: auto;
    margin-top: 0px;
    margin-bottom: 2px;
    background-color: lightcyan;
    outline: none;
    border-radius: 8px;
    padding: 13px;
    color: black;
    letter-spacing: 2px;
    border: none;
    cursor: pointer;
}

.infoButton:hover {
    background-color: rgb(64, 191, 191);
    color: lightcyan;
    transition: background-color 0.5s ease;
}

.deleteButton {
    width: auto;
    margin-top: 0px;
    margin-bottom: 2px;
    background-color: rgb(254, 187, 187);
    outline: none;
    border-radius: 8px;
    padding: 13px;
    color: black;
    letter-spacing: 2px;
    border: none;
    cursor: pointer;
}

.deleteButton:hover {
    background-color: rgb(231, 61, 61);
    color: lightcyan;
    transition: background-color 0.5s ease;
}
</style>
    